//引入 axios 需先下载 cnpm install axios -S
import axios from "axios";

//引入qs库 vue提供的 转换请求头格式的库 无需下载
import qs from "qs";


//请求加载动画 element-ui 需下载element-ui cnpm i element-ui -S 
// 需在全局引入 下面三段
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);


// 引入loading组件
import {
    Loading
} from 'element-ui';

// Vue.use(Loading);


// 命名加载遮罩 便于开启关闭
let loadingInstance;

//实例化axios
const ajaxAxios = axios.create({
    //设置公共请求头
    baseURL: 'http://www.bufantec.com',
    //设置响应延时
    timeout: 5000
})

//判断 token 是否存在 存在则添加公共请求头
//仅在登陆时需要
// if (localStorage.getItem("token")) {
//     axios.defaults.headers.common['token'] = token;
// }

//配置请求拦截器
ajaxAxios.interceptors.request.use(function (config) {
    // 开启加载动画
    loadingInstance = Loading.service()
    //当请求为post的时候
    if (config.method == 'post') {
        // 需要更改请求头格式
        config.data = qs.stringify(config.data)
    }
    //暴露请求
    return config

}, function (error) {
    //请求拦截失败时 把失败信息暴露出去
    return Promise.reject(error);
})

//配置响应拦截器
ajaxAxios.interceptors.response.use(function (config) {
    // 关闭遮罩
    loadingInstance.close();
    return config.data
}, function (error) {
    return Promise.reject(error);
})

//暴露实例化后的 axios ，相当于暴露出全部配置
export default ajaxAxios

// 在vue全局配置下引入封装好的配置 并将操作赋值给 vue的原型对象 
// import ajaxAxios from '@/ajaxAxios'
// Vue.prototype.$axios = ajaxAxios
// 后续可通过 this.$axios 使用配置好的axios